<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html >
<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="keywords"  content = "个人信息 java jsp"/>
    <meta http-equiv="author" content="phenix"/>
    <link rel="stylesheet" type="text/css" href="../assets/css/skin.css" />
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        //图片预览
        function getFullPath(obj){
            if (obj){
                //ie
                if (window.navigator.userAgent.indexOf("MSIE") >= 1){
                    obj.select();
                    return document.selection.createRange().text;
                }else if (window.navigator.userAgent.indexOf("Firefox") >= 1){
                    //firefox　
                    return window.URL.createObjectURL(obj.files.item(0));
                }else if(navigator.userAgent.indexOf("Chrome")>0){
                    //chrome
                    return window.URL.createObjectURL(obj.files.item(0));
                }
                return obj.value;
            }
        }
        $(function(){
            $("#filePic").change(function(){
                var path = getFullPath($(this)[0]);
                console.log(path);
                $("#imgPic").prop("src",path);
            });
        });
    </script>
</head>
<body>
    <div style="margin: 0 auto;width: 1200px;height: 900px">
        <div style="position: absolute">
            <p>个人信息修改</p>
            <form action="${pageContext.request.contextPath}/login.let?type=modify" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <fieldset>
                        <legend>头像预览</legend>
                        <img id="imgPic" src="${user.image}" width="150px" height="150px" style="border-radius: 50%"/>
                    </fieldset>
                    <label for="filePic">头像</label>
                    <input type="hidden" name="id" value="${user.id}">
                    <input type="hidden" name="pic"  value="${user.image}">
                    <input type="file" id="filePic" name="filePic"  value="${user.image}">
                </div>
                <div class="form-group" style="position: absolute;top: 60px;left: 200px;">
                    <label for="name">昵称</label>
                    <input type="text" class="form-control" style="width: 200px" id="name" name="name" placeholder="请输入昵称" value="${user.name}">
                </div>
                <div class="form-group" style="position: absolute;top: 120px;left: 200px;">
                    <label for="address">地址</label>
                    <input type="text" class="form-control" style="width: 200px" id="address" name="address" placeholder="请输入地址" value="${user.address}">
                </div>
                <div class="form-group" style="position: absolute;top: 180px;left: 200px;">
                    <label for="phone">电话</label>
                    <input type="text" class="form-control" style="width: 200px" id="phone" name="phone" placeholder="请输入电话号码" value="${user.phone}">
                </div>

                <button type="submit" class="btn btn-default">提交</button>
                <button type="reset" class="btn btn-default">重置</button>
            </form>
        </div>
    </div>
</body>
</html>